<template>
  <el-row :gutter="20">
    <el-col :span="6">
      <DictManageIndex
        ref="dictTableRef"
        @rowClick="dictClick"/>
    </el-col>
    <el-col :span="18">
      <DictItemManageIndex
        ref="dictItemTableRef"
      />
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
// 导入字典模块首页
import DictManageIndex from '@/views/page/system/dict/DictManageIndex.vue';
// 导入字典列表模块首页
import DictItemManageIndex from '@/views/page/system/dict/DictItemManageIndex.vue';
import { onMounted, ref } from 'vue';
import { TableRef } from '@/types/interface/base_ref_interface';

// 字典模块表格对象的接口类型
interface DictTableRef{ // 定义表格通用组件的ref对象
  initTable:()=>void;
  getSelectionRows:()=>any[];
}
// 字典模块表格对象
const dictTableRef = ref<DictTableRef>();
// 字典列表项表格对象的接口类型
interface DictItemTableRef{
  getDictItemsByDictId:(dictId:number)=>Promise<void> // 根据
}
// 字典列表项模块表格对象
const dictItemTableRef = ref<DictItemTableRef>();
// 页面初始化时就要显示字典模块的默认值和对应列表项
onMounted(async () => {
  // 先执行字典模块的表格初始化
  await dictTableRef.value!.initTable();
  // 获取字典模块的默认值
  const selectRows = dictTableRef.value!.getSelectionRows();
  // 在字典列表项模块显示对应的值
  if (selectRows && selectRows.length > 0) {
    dictItemTableRef.value!.getDictItemsByDictId(selectRows[0]);
  }
});
// 点击字典表格的行，实现右侧列表项的对应变化
const dictClick = (row:any):void => {
  // console.log(row);
  dictItemTableRef.value!.getDictItemsByDictId(row);
};
</script>

<style scoped>

</style>
